<template>
    <f7-page>
        <f7-login-screen class="demo-login-screen" :opened="loginScreenBool"
                         @loginscreen:closed="loginScreenBool = false">
            <f7-page login-screen>
                <f7-login-screen-title>Framework7</f7-login-screen-title>
                <f7-list form>
                    <f7-list-item>
                        <f7-label>Username</f7-label>
                        <f7-input type="text" placeholder="Your username"></f7-input>
                    </f7-list-item>
                    <f7-list-item>
                        <f7-label>Password</f7-label>
                        <f7-input type="password" placeholder="Your password"></f7-input>
                    </f7-list-item>
                </f7-list>
                <f7-list>
                    <f7-list-button @click="signIn">Sign In</f7-list-button>
                    <!--<f7-list-button @click="loginScreenOpened=false">暂不登录</f7-list-button>-->
                    <f7-list-button @click="waitLogin">暂不登录</f7-list-button>
                    <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </f7-block-footer>
                </f7-list>
            </f7-page>
        </f7-login-screen>
    </f7-page>
</template>

<script>
  export default {
    name: 'login-component',
    props: {
      loginScreenOpened: {
        type: Boolean,
        default: false,
        required: true
      }
    },
    data () {
      return {
        loginScreenBool: false
      }
    },
    watch: {
      loginScreenOpened: function(){
        this.loginScreenBool = this.loginScreenOpened
      }
    },
    methods:{
      signIn () {
        const self = this
        const app = self.$f7
        app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
          // app.loginScreen.close()
          sessionStorage.setItem('token','111111')
          if(sessionStorage.getItem('token')){
            self.$f7router.navigate(sessionStorage.getItem('routeTo'))
          }
          self.$emit('funLogin', true)
        })
      },
      waitLogin(){
        const self = this
        const app = self.$f7
        // app.loginScreen.close()
        if(sessionStorage.getItem('token')){
          self.$f7router.navigate(sessionStorage.getItem('routeFrom'))
        }
        self.$emit('funLogin', false)
        // self.isLogin = false
      }
    }
  }
</script>

<style scoped>

</style>
